<!-- 精彩活动 -->
<template>
    <div class="curriculum-resources-container">
      <header>
        <el-form ref="search" :model="searchForm" inline label-width="120px">
          <el-row :gutter="24">
            <!-- <el-col :span="6">
              <el-form-item label="活动标题" prop="title">
                <el-input v-model="searchForm.title" type="text" placeholder="请输入" />
              </el-form-item>
            </el-col> -->
            <el-col :span="6">
              <el-form-item>
                <!-- <el-button @click="SearchReset('search')">重置</el-button>
                <el-button type="primary" :loading="searchLoading" @click="SearchSubmit">查询</el-button> -->
                <el-button type="primary" @click="CreateForm">新增充值规则</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </header>
      <article>
        <Table
          :table-data="tableConfig.data.list"
          :table-column-options="tableConfig.columns"
          :table-data-total="tableConfig.data.total"
          :page="searchForm.pageNum"
          :size="searchForm.pageSize"
          @tableUpdate="CurrentChange"
        >
          <template #timeroperation="{ data }">
            <span>{{data.createTime | formDate}}</span>
          </template>
          <template #operation="{ data }">
            <el-button type="text" @click="TableEdit(data)">编辑</el-button>
            <el-button type="text" @click="TableDelete(data)">删除</el-button>
          </template>
        </Table>
      </article>
      <!-- create/edit form modal -->
      <el-dialog
        title="充值规则管理"
        :visible.sync="modalConfig.show"
        width="50%"
        destroy-on-close
        :before-close="() => FormCancel('formData')"
      >
        <el-form ref="formData" :model="modalConfig.formData" label-width="120px" label-position="right">
          <el-form-item label="规则名称" prop="name">
            <el-input v-model="modalConfig.formData.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="充值金额" prop="condition">
            <el-input v-model="modalConfig.formData.conditionBase" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="赠送金额" prop="conditionResult">
            <el-input v-model="modalConfig.formData.conditionResult" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="" style="text-align: right;">
            <el-button @click="FormCancel('formData')">取消</el-button>
            <el-button type="primary" @click="FormSubmit">确定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </template>
  
<script>
  import Table from '@/components/Table/index'
  import meetApi from '../../api/meet.js'
  export default {
    name: 'rechargeManage',
    components: {
      Table
    },
    data() {
      return {
        searchLoading: false,
        searchForm: {
          'pageNum': 1,
          'pageSize': 10
        },
        tableConfig: {
          columns: [
            {
              label: '规则名称',
              prop: 'name',
              width: 100
            },
            {
              label: '充值金额',
              prop: 'conditionBase',
              width: 100
            },
            {
              label: '赠送金额',
              prop: 'conditionResult',
              width: 100
            },
            {
              label: '添加日期',
              columnType: true,
              slotName: 'timeroperation',
              width: 100
            },
            {
              label: '操作',
              columnType: true,
              slotName: 'operation',
              width: 200
            }
          ],
          data: {
            list: []
          }
        },
        modalConfig: {
          title: '新增',
          show: false,
          formData: {
            "name": "",
            "conditionBase": '',
            "conditionResult": ''
          }
        }
      }
    },
    filters: {
      formDate(key){
        const date = new Date(key);
        const formattedDate = date.toISOString().substr(0, 10); 
        return formattedDate
      }
    },
    async mounted() {
      this.TableList()
    },
    methods: {
      TableList() {
        this.$yAxios({
          url: meetApi.queryChargeRule,
          data: this.searchForm,
        }, info => {
          this.tableConfig.data = info
        })
      },
      // 点击查询按钮
      SearchSubmit() {
        this.searchLoading = true
        setTimeout(() => {
          this.searchLoading = false
        }, 1000)
        this.TableList()
      },
      // 点击重置按钮
      // SearchReset(name) {
      //   this.$refs[name].resetFields()
      //   this.TableList()
      // },
      // 点击新增按钮
      CreateForm() {
        this.modalConfig.show = true
        delete this.modalConfig.formData.id
        this.modalConfig.formData = {
          "name": "",
          "condition": '',
          "conditionResult": ''
        }
      },
      // 分页数据回调
      CurrentChange(e) {
        this.searchForm.pageSize = e.size
        this.searchForm.pageNum = e.page
        this.TableList()
      },
      // 点击表格内删除
      async TableDelete(data) {
        this.$confirm('你确定要删除此条数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          this.$yAxios({
            url: meetApi.removeChargeRule,
            data: {ids: [data.id]},
            loading: true
          }, info => {
            this.TableList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 点击表格内编辑
      TableEdit(data) {
        this.modalConfig.show = true
        // Detail(data.id).then(res => {
          this.modalConfig.formData = data
        // })
      },
      // 点击表单确定
      FormSubmit() {
        this.$yAxios({
          url: meetApi.saveChargeRule,
          data: this.modalConfig.formData,
          loading: true
        }, info => {
          this.TableList()
          this.modalConfig.show = false
        })
      },
      // 点击表单取消
      FormCancel(name) {
        this.$refs[name].resetFields()
        this.modalConfig.show = false
      }
    }
  }
</script>
<style lang="less" scoped>
  .el-form-item__content{
    width: 100%;
  }
  .el-select{
    width: 100%;
  }
  .curriculum-resources-container{
      padding: 20px;
  }
  
</style>
  